//推荐使用class定义样式，且请以'组件名'作为前缀(避免与其他组件class产生冲突)
//It is recommended to use class to define the style, and please prefix with 'component name'(Avoid conflicts with other component class)

._BoxDialog-Body{
    position: relative;
    z-index: 50;
}

._BoxDialog-Backdrop{
    position: fixed;
    inset: 0;
    opacity: 0.95;
    background:var(--Theme-Color-Body);
    transition: opacity var(--Theme-TransDuration) ease-out;
    &[data-closed]{
        opacity: 0;
    }
}

._BoxDialog-Content{
    width: 100vw;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    display: flex;
    padding:var(--Theme-Gap);
}

._BoxDialog-Content-Panel{
    display: flex;
    max-height: 100%;
    max-width: 768px;
    transition-property: opacity,transform;
    transition-duration: var(--Theme-TransDuration);
    transition-timing-function: ease-out;
    background: var(--Theme-Color-Module);
    box-shadow: var(--Theme-BoxShadow);
    padding:var(--Theme-Gap);
    border-radius: var(--Theme-Radius);
    &[data-closed]{
        opacity: 0;
        transform: scale(0.75);
    }
}

._BoxDialog-Content-Panel-Child{
    flex: 1 1 0;
    overflow-x: hidden;
    overflow-y: auto;
}

._BoxDialog-Close{
    float:right;
    cursor: pointer;
    width: var(--Theme-Text-LG);
    height: var(--Theme-Text-LG);
    color: var(--Theme-Color-Text);
    transition: transform var(--Theme-TransDuration);
    &:hover{
        transform: rotate(90deg);
    }
    html[dir="rtl"] &{
        float:left;
    }
}
._BoxDialog-Close:hover{
    color: var(--Theme-Color-Active);
}

._BoxDialog-Content-PanelAlarm {
    animation: _BoxDialog-Content-PanelAlarmFrame var(--Theme-TransDuration) ease-in-out 1;
}
@keyframes _BoxDialog-Content-PanelAlarmFrame {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}